<template>
  <div>
    <el-card>
      <span>时间范围</span>
      <el-date-picker
        v-model="date"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        size="small"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <el-button type="primary" size="small" @click="searchBtn">查询</el-button>
      <div ref="main" class="mycharts" style="width: 100%; height: 400px"></div>
    </el-card>
  </div>
</template>

<script>
//引入echarts
import * as echarts from "echarts";
import { orderTotal } from "../../api/order";
import dayjs from "dayjs";
export default {
  data() {
    return {
      date: "",
      myChart: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    //添加一个窗口发变化的事件
    window.addEventListener("resize", this.resizeHandle);

    this.loadData();
  },
  beforeDestroy() {
    window.removeEventListener("resize",this.resizeHandle);
  },
  methods: {
    //查询按钮
    searchBtn() {
      console.log(this.date);
      this.loadData();
    },
    //获取数据
    async loadData() {
      this.drawLine();
    },
    //窗口适配
    resizeHandle() {
      this.myChart.resize();
    },
    drawLine() {
      this.myChart = echarts.init(this.$refs.main);
      let option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "30%"],
        },
        visualMap: {
          type: "piecewise",
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 1,
              lt: 3,
              color: "rgba(0, 0, 180, 0.4)",
            },
            {
              gt: 5,
              lt: 7,
              color: "rgba(0, 0, 180, 0.4)",
            },
          ],
        },
        series: [
          {
            type: "line",
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "#5470C6",
              width: 5,
            },
            markLine: {
              symbol: ["none", "none"],
              label: { show: false },
              data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }],
            },
            areaStyle: {},
            data: [
              ["2019-10-10", 200],
              ["2019-10-11", 560],
              ["2019-10-12", 750],
              ["2019-10-13", 580],
              ["2019-10-14", 250],
              ["2019-10-15", 300],
              ["2019-10-16", 450],
              ["2019-10-17", 300],
              ["2019-10-18", 100],
            ],
          },
        ],
      };
      //画图
      this.myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.el-range-editor {
  margin-left: 20px;
  /deep/.el-range-input {
    width: 130px !important;
    margin-left: 10px;
  }
}
.el-button {
  margin-left: 20px;
}
.mycharts {
  margin-top: 20px;
}
</style>